<template>
  <div class="page-box">
    <div>
      <ProTable ref="proTable" highlight-current-row :columns="columns" :request-api="getTableList">
        <template #totalAmount="scope">
          {{ scope.row.totalAmount ? (scope.row.totalAmount / 100).toFixed(2) : "--" }}
        </template>
        <template #orderTime="scope">
          {{ scope.row.orderTime ? dayjs(scope.row.orderTime * 1000).format("YYYY-MM-DD HH:mm:ss") : "--" }}
        </template>
        <template #paymentTime="scope">
          {{ scope.row.paymentTime ? dayjs(scope.row.paymentTime * 1000).format("YYYY-MM-DD HH:mm:ss") : "--" }}
        </template>
        <template #status="scope">
          {{ scope.row.status ? statusEnum[scope.row.status - 1] : "--" }}
        </template>
        <template #operation="scope">
          <el-button type="primary" link @click="openDrawer('查看', scope.row)">订单详情</el-button>
          <template v-if="scope.row.status === 1">
            <el-button type="primary" link @click="closeOrder(scope.row)">关闭订单</el-button>
          </template>
          <template v-else-if="scope.row.status === 2">
            <el-button type="primary" link @click="closeOrder(scope.row)">订单退款</el-button>
          </template>
        </template>
      </ProTable>
    </div>
    <OrderInfo ref="drawerRef" />
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onActivated } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { getOrderList, editOrder, getOrderDetail } from "@/api/modules/order";
import { ElMessageBox } from "element-plus";
import { useDebounceFn } from "@vueuse/core";
import dayjs from "dayjs";
import OrderInfo from "./components/OrderInfo.vue";

const statusEnum = ["待支付", "已支付", "已取消", "已退款"];

const searchForm = ref<any>({
  keyword: ""
});
const proTable = ref<ProTableInstance>();
const columns = reactive<ColumnProps<any>[]>([
  {
    prop: "keyword",
    label: "订单搜索",
    isShow: false,
    search: {
      el: "input",
      props: {
        placeholder: "请输入订单号",
        onChange: e => {
          searchForm.value.keyword = e;
          proTable.value?.getTableList();
        }
      }
    }
  },
  { prop: "orderNo", label: "订单编号", minWidth: "200" },
  { prop: "userName", label: "客户名  ", minWidth: "100" },
  { prop: "tableName", label: "餐桌名", minWidth: "100" },
  { prop: "totalAmount", label: "订单总金额", minWidth: "100" },
  { prop: "orderTime", label: "下单时间", minWidth: "100" },
  { prop: "paymentTime", label: "支付时间", minWidth: "100" },
  { prop: "status", label: "订单状态", minWidth: "100" },
  { prop: "operation", label: "操作", minWidth: "100", fixed: "right" }
]);

onActivated(() => {
  proTable.value?.getTableList();
});

const getTableList = useDebounceFn(async params => {
  const newParams = {
    pageIndex: params.pageIndex,
    pageSize: params.pageSize,
    ...searchForm.value
  };
  if (!newParams.pageIndex) {
    newParams.pageIndex = 1;
  }
  if (!newParams.pageSize) {
    newParams.pageSize = 10;
  }
  return await getOrderList(newParams);
}, 50);
const closeOrder = row => {
  const title = row.stauts === 1 ? "确认是否关闭该订单" : "确认是否退款该订单";
  ElMessageBox.confirm(title).then(async () => {
    await editOrder({ orderId: row.orderId, status: 4 });
    await proTable.value?.getTableList();
  });
};

const drawerRef = ref<InstanceType<typeof OrderInfo> | null>(null);
const openDrawer = async (title: string, row: any) => {
  const res = await getOrderDetail({ orderId: row.orderId });
  console.log("res", res.data);
  const params = {
    title,
    row: { ...(res.data as Object) },
    isView: title === "查看",
    api: undefined,
    getTableList: proTable.value?.getTableList
  };
  drawerRef.value?.acceptParams(params);
};
</script>
